import React, { useCallback, useEffect, useState, useRef, useContext } from 'react';
import { Spin, Table, Button, Modal, Select, message, Anchor } from 'antd';
import { formatMessage } from 'umi';
import cn from 'classnames';
import 'intro.js/introjs.css';
import IntroJs from 'intro.js';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { withRoutePage } from '@/utils/enhanceUtils';
import { BottomAction } from '@/components';
import { isSuccess } from '@/utils/request';
import If from '@/components/If';
import authHelper from '@/utils/auth/helper';
import { defaultFormatResult } from '@/hooks';
import AuthComponent from '@/utils/auth/AuthComponent';
import pageTabUtil from '@/utils/pageTabUtil';

import {
    querySalaryTemplateMain,
    querySalaryOverviewTable,
    queryStaffBaseItemList,
    onDeleteStaffItem,
    queryShowGuide,
    onFinishGuide,
    queryNeedInit,
    batchQuote,
    generateDateSave,
    validateSalaryTemplateBeforeNext,
    reset as resetService
} from '@/services/salaryManage/salaryCalculate';

import { useHandleRefreshMessage } from '@/pages/SalaryManage/utils/tabMessageUtil';
import NumberFormatter from '@/pages/SalaryManage/components/NumberFormatter';
import { goToSalaryTemplateLog, goToProcessApply } from '@/pages/SalaryManage/utils/pageNavigateUtil';
import { PROCESS_TYPE } from '@/pages/SalaryManage/utils/processUtil';
import AutoDivider from '@/pages/SalaryManage/components/AutoDivider';
import { TabMenuRouter, TabContextMenuFilter } from '@/pages/SalaryManage/components/MenuFilterRouter';
import { MENU_AUTH_CODE_MAP } from '@/pages/SalaryManage/SalaryCalculate/TemplateSetting/components/TemplateSettingRouter';
import { isSingapore } from '@/pages/SalaryManage/utils';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import OrganizationSelect from '@/components/OrganizationSelect';
import { financeInit } from '@/services/salaryManage/salaryCommon';
import { TabStoreContext } from '@/pages/SalaryManage/constant/TabStoreContext';

import styles from '../index.less';
import AddBaseInfoItemModal from './components/AddBaseInfoItemModal';
import MonthSalaryMain from './components/MonthSalaryMain';
import SalarySheetModal from './components/SalarySheetModal';
import YearSelect from '../../../components/YearSelect';
import { MONTHList } from '../../../utils/staticList';
import PayslipSetting from './components/PayslipSettingModal';

import salaryOperationImg from '../../../../../assets/financeManage/bg_add_new_setting.png';

const { confirm } = Modal;
const { Option } = Select;

const BaseInfoSetting = ({
    baseInfoList = [],
    onDeleteBaseInfoItem,
    onSaveBaseInfoItem,
    currentSelectYear,
    currentOrgCode,
    isGuide = false
}) => {
    const [visible, setVisible] = useState(false);
    return (
        <div className={styles.salaryContent}>
            <div className={styles.titleWrap}>
                <div className={styles.leftTitleWrap}>
                    <div className={styles.title}>
                        {formatMessage({ id: 'templateSetting.salaryTemplate.staffBaseInfoTitle' })}
                    </div>
                </div>
            </div>
            <div className={styles.baseInfoSettingWrap}>
                {baseInfoList.map(item => (
                    <div
                        key={item.salaryItemId}
                        className={cn(styles.baseInfoWrap, { [styles.baseInfoDisabled]: item.fixed })}
                    >
                        <span className="baseInfoLabel">{item.salaryItemName}</span>
                        {!item.fixed && (
                            <i
                                className={cn('icon iconfont iconclose_o', styles.baseInfoClose)}
                                onClick={() => {
                                    if (!item.fixed) {
                                        confirm({
                                            title: `是否确定删除【${item.salaryItemName}】？`,
                                            content: '',
                                            okText: '确定',
                                            cancelText: '取消',
                                            onOk() {
                                                onDeleteBaseInfoItem(item.id);
                                            }
                                        });
                                    }
                                }}
                            />
                        )}
                    </div>
                ))}
                <If condition={authHelper.checkCode('finance:salary:computation:setting:salarytemp:addemployee')}>
                    <Button
                        className={styles.addBtn}
                        onClick={e => {
                            e.preventDefault();
                            if (isGuide) return;
                            setVisible(true);
                        }}
                        data-step="1"
                        data-intro="支持手动添加员工详细信息"
                        data-position="left"
                    >
                        {/* 添加 */}
                        {formatMessage({ id: 'templateSetting.salaryTemplate.baseInfoAddBtn' })}
                    </Button>
                </If>
            </div>
            <If condition={visible}>
                <AddBaseInfoItemModal
                    visible={visible}
                    onSave={onSaveBaseInfoItem}
                    onCancel={() => {
                        setVisible(false);
                    }}
                    currentSelectYear={currentSelectYear}
                    currentOrgCode={currentOrgCode}
                />
            </If>
        </div>
    );
};
const SalaryTemplate = props => {
    const { location, history } = props;

    const {
        store: { selectOrganizationCode, defaultOrganization },
        mergeTabStore
    } = useContext(TabStoreContext);

    /* 标记是否已经初始化行政机构 */
    const initializedRef = useRef(false);
    /** 页面加载状态 */
    const [pageLoading, setPageLoading] = useState(false);
    /** 表格加载状态 */
    const [tableLoading, setTableLoading] = useState(false);
    /** 【员工基本信息配置】加载状态 */
    const [baseInfoLoading, setBaseInfoLoading] = useState(false);
    /** 是否显示【薪资条预览】 */
    const [salarySheetModalVisible, setSalarySheetModalVisible] = useState(false);
    /** 薪资构成要素概览 -> 表头员工信息 */
    const [headerStaffItems, setHeaderStaffItems] = useState([]);
    /** 薪资构成要素概览 -> 表头薪资项员工信息 */
    const [headerSalaryItems, setHeaderSalaryItems] = useState([]);
    /** 是否显示立即配置按钮 */
    const [needConfig, setNeedConfig] = useState(false);
    /** 员工基本信息数据 */
    const [baseInfoList, setBaseInfoList] = useState([]);
    /** 月模板数据列表 */
    const [monthSalaryList, setMonthSalaryList] = useState([]);
    /** 薪资构成要素概览 -> 表格数据 */
    const [tableData, setTableData] = useState([]);
    /** 月模板下拉列表 */
    const [monthList, setMonthList] = useState([]);
    /** 选择的的年份 */
    const [currentSelectYear, setCurrentSelectYear] = useState(
        location.query.year ? Number(location.query.year) : null
    );
    /** 选择的月份 */
    const [currentSelectMonth, setCurrentSelectMonth] = useState(
        location.query.month ? Number(location.query.month) : new Date().getMonth() + 1
    );
    /** 是否在引导页中 */
    const [isGuide, setIsGuide] = useState(false);
    /** 是否已经完成过引导页 */
    const [guideFinished, setGuideFinished] = useState(false);
    /** 是否显示重置弹出框 */
    const [resetVisible, setResetVisible] = useState(false);
    const [simplePageVo, setSimplePageVo] = useState({});
    /** 是否显示薪资条预览 */
    const [payslipSettingModalVisible, setPayslipSettingModalVisible] = useState(false);

    const prevOrganizationRef = useRef(null);

    const handleHeaderData = (data = []) =>
        data.map(item =>
            item.children.length
                ? { ...item, align: 'center', children: handleHeaderData(item.children) }
                : {
                      ...item,
                      align: item.columnType === 1 || item.columnType === 2 ? 'right' : 'left',
                      children: null,
                      render: text => (
                          <span className={cn({
                              [styles.tableColorRed]: item.colorControl === 1 || text < 0,
                              [salaryStyle.currency]: item.columnType === 1 || item.columnType === 2
                          })}>
                              {item.columnType === 1 || item.columnType === 2 ? <NumberFormatter value={text} /> : text}
                          </span>
                      )
                  }
        );
    const onSetGuideShow = async () => {
        try {
            setGuideFinished(true);
            await onFinishGuide(selectOrganizationCode);
        } catch (e) {
            console.log(e);
        }
    };
    const startIntro = () => {
        setIsGuide(true);

        // 如果已经跳转到别的页面时，直接不再显示引导页
        if (history.location.pathname !== location.pathname) {
            return;
        }

        IntroJs()
            .setOptions({
                prevLabel: '上一步',
                nextLabel: '下一步',
                skipLabel: '跳过',
                doneLabel: '立即配置',
                showStepNumbers: false,
                tooltipPosition: 'left',
                showProgress: false,
                disableInteraction: true,
                showBullets: false,
                scrollToElement: true,
                hidePrev: true,
                hideNext: true,
                tooltipClass: styles.tooltipClass,
                exitOnOverlayClick: false,
                overlayOpacity: 0.6
            })
            .goToStep(1)
            .onbeforechange(() => {
                // 当按钮不可点击
                document.querySelectorAll('[data-step]').forEach(element => {
                    // eslint-disable-next-line no-param-reassign
                    element.style.pointerEvents = 'none';
                });
            })
            .onafterchange(element => {
                const elementTop = element.getBoundingClientRect().top;

                // 解决1920 *1080p，缩放比例为150%时，文字显示不全的bug
                if (elementTop > window.innerHeight - 60) {
                    const toolTip = document.querySelector('.introjs-helperLayer');
                    const layer = document.querySelector('.introjs-tooltipReferenceLayer');
                    toolTip.style.display = 'none';
                    layer.style.display = 'none';

                    element.scrollIntoView({ block: 'center', inline: 'nearest' });

                    const newTop = element.getBoundingClientRect().top - 5;
                    toolTip.style.top = `${newTop}px`;
                    toolTip.style.display = 'block';
                    layer.style.top = `${newTop}px`;
                    layer.style.display = 'block';
                    const innerTip = layer.querySelector('.introjs-tooltip');
                    innerTip.style.top = `${0 - innerTip.clientHeight + 30}px`;
                }
            })
            .start()
            .oncomplete(() => {
                // 让按钮恢复可点击
                document.querySelectorAll('[data-step]').forEach(element => {
                    // eslint-disable-next-line no-param-reassign
                    element.style.pointerEvents = 'initial';
                });
                onSetGuideShow();
                setIsGuide(false);
            })
            .onexit(() => {
                setIsGuide(false);
            });
    };

    // 初始化获取当前页面所有数据
    const init = async () => {
        setPageLoading(true);
        try {
            const [monthTemplateInfo, salaryTemplateOverviewVO, salaryTemplateStaffVOs = []] = await Promise.all([
                querySalaryTemplateMain(selectOrganizationCode, currentSelectYear, currentSelectMonth),
                querySalaryOverviewTable(selectOrganizationCode, currentSelectYear, currentSelectMonth),
                queryStaffBaseItemList(selectOrganizationCode, currentSelectYear)
            ]).then(([mRes, oRes, eRes]) => [
                defaultFormatResult.formatResult(mRes),
                defaultFormatResult.formatResult(oRes),
                defaultFormatResult.formatResult(eRes)
            ]);

            const { templateList = {}, ...simpleVo } = monthTemplateInfo;
            setHeaderStaffItems(handleHeaderData(salaryTemplateOverviewVO.headerStaffItems));
            setHeaderSalaryItems(handleHeaderData(salaryTemplateOverviewVO.headerSalaryItems));
            setTableData(salaryTemplateOverviewVO.data || []);
            setNeedConfig(salaryTemplateOverviewVO?.needConfig ?? false);
            setBaseInfoList(salaryTemplateStaffVOs || []);
            const monthKeys = Object.keys(templateList);
            const monthSalaryListArr = monthKeys.map(month => ({
                month,
                year: currentSelectYear,
                name: MONTHList[month - 1].monthName,
                ...templateList[month]
            }));
            setMonthSalaryList(monthSalaryListArr);
            setSimplePageVo(simpleVo);

            // 如果未完成过引导页，则请求是否展示引导页接口
            if (!guideFinished) {
                const { data: guideData = false } = await queryShowGuide(selectOrganizationCode);
                console.log('=====', guideData);
                setGuideFinished(!guideData);
                if (guideData) {
                    startIntro();
                }
            }
            setPageLoading(false);
        } catch (e) {
            setPageLoading(false);
        }
    };

    // 引入年模板数据提示
    const initQuoteConfirm = async (organizationCode, year) => {
        const response = await queryNeedInit(organizationCode, year);
        if (!isSuccess(response) || response.data === false) {
            if (!isSuccess(response)) {
                message.error(response.msg);
            }
            return;
        }
        Modal.confirm({
            content: `是否引入【${year - 1}年】的月模板数据`,
            okText: '确定',
            cancelText: '取消',
            async onOk() {
                const res = await batchQuote(selectOrganizationCode, year - 1, year);
                if (!isSuccess(res)) {
                    return;
                }
                message.success('引入成功！');
                await init();
            }
        });
    };

    // 根据当前月份获取薪资构成要素概览
    const getCurrentSalaryMainData = async month => {
        try {
            setTableLoading(true);
            if (month) {
                setCurrentSelectMonth(month);
            }
            const { code, data = {} } = await querySalaryOverviewTable(
                selectOrganizationCode,
                currentSelectYear,
                month || currentSelectMonth
            );
            if (code === 10000) {
                setHeaderStaffItems(handleHeaderData(data.headerStaffItems));
                setHeaderSalaryItems(handleHeaderData(data.headerSalaryItems));
                setTableData(data.data || []);
                setNeedConfig(data?.needConfig ?? false);
            }
            setTableLoading(false);
        } catch (e) {
            console.log(e);
        }
    };
    // 获取基本信息配置项列表
    const getBaseInfoList = async () => {
        try {
            setBaseInfoLoading(true);
            const { code, data = {} } = await queryStaffBaseItemList(selectOrganizationCode, currentSelectYear);
            if (code === 10000) {
                setBaseInfoList(data || []);
            }
            setBaseInfoLoading(false);
            console.log('基本信息配置项列表');
        } catch (e) {
            console.log(e);
            setBaseInfoLoading(false);
        }
    };
    // 删除员工基本信息
    const onDeleteBaseInfoItem = async id => {
        try {
            const { code } = await onDeleteStaffItem(id);
            if (code === 10000) {
                message.success('删除成功！');
                getBaseInfoList();
                getCurrentSalaryMainData(currentSelectMonth);
            }
        } catch (e) {
            console.log(e);
        }
    };
    // 获取12个月薪资构成要素列表
    const getSalaryMonthList = async () => {
        // 暂时使用总概接口
        init();
    };
    const initSelectList = () => {
        const monthDataList = [];
        // eslint-disable-next-line no-plusplus
        for (let k = 1; k <= 12; k++) {
            monthDataList.push({
                key: k,
                label: `${k}月`
            });
        }
        setMonthList(monthDataList);
    };

    const onCloseSalarySheetModal = useCallback(() => {
        setSalarySheetModalVisible(false);
    }, []);

    const onSetCurrentYear = useCallback(key => {
        setCurrentSelectYear(key);
    }, []);
    useEffect(() => {
        initSelectList();
    }, []);
    useEffect(() => {
        const promiseArray = [];

        if (!selectOrganizationCode) {
            return;
        }

        if (prevOrganizationRef.current !== selectOrganizationCode) {
            prevOrganizationRef.current = selectOrganizationCode;
            // 初始化企业的初始数据
            promiseArray.push(financeInit(selectOrganizationCode));
        }

        if (selectOrganizationCode && currentSelectYear) {
            promiseArray.push(initQuoteConfirm(selectOrganizationCode, currentSelectYear));
            Promise.all(promiseArray).then(([firstResponse]) => {
                if ((promiseArray.length === 2 && isSuccess(firstResponse)) || promiseArray.length < 2) {
                    init();
                }
            });
        }
    }, [selectOrganizationCode, currentSelectYear]);

    useEffect(() => {
        const unBlock = history.block(_location => {
            // 当有引导页时退出引导页
            // eslint-disable-next-line no-unused-expressions
            IntroJs.instances?.[0]?.exit();

            if (_location.pathname === '/personal/portal/apply') {
                const historyList = pageTabUtil.history[pageTabUtil.getCurrentKey()];
                if (
                    historyList.length >= 2 &&
                    historyList[historyList.length - 2].pathname === '/personal/portal/apply'
                ) {
                    window.setTimeout(() => {
                        message.destroy();
                        pageTabUtil.goTabHistory(pageTabUtil.getCurrentKey(), -1);
                    }, 250);
                } else {
                    unBlock();
                }
            } else {
                unBlock();
            }
        });

        return unBlock;
    }, []);

    const refresh = () => {
        if (currentSelectYear) {
            init();
            initQuoteConfirm(selectOrganizationCode, currentSelectYear);
        }
    };
    const afterChangeGenerateDate = (selectedDate, monthData) => {
        generateDateSave({
            id: monthData.salaryTemplateId,
            generateDate: selectedDate?.format('YYYY-MM-DD')
        }).then(res => {
            if (!isSuccess(res)) {
                message.error(res.msg);
            }
            // 重新刷新界面
            refresh();
        });
    };

    // 重置
    const reset = () => {
        setResetVisible(true);
    };

    // 重置
    const doReset = async () => {
        try {
            const res = await resetService(selectOrganizationCode, currentSelectYear);
            setResetVisible(false);

            if (!isSuccess(res)) {
                message.error(res.msg);
                return;
            }
            message.success('重置成功');
            // 重新刷新界面
            refresh();
        } catch (e) {
            setResetVisible(false);
            message.error(e);
        }
    };

    // 下一步
    const goToNext = () => {
        validateSalaryTemplateBeforeNext(selectOrganizationCode, currentSelectYear)
            .then(response => {
                if (!isSuccess(response)) {
                    message.error(response.msg);
                    return;
                }
                goToProcessApply(
                    PROCESS_TYPE.SALARY_TEMPLATE_APPLY,
                    { year: currentSelectYear, organizationCode: selectOrganizationCode },
                    '没有找到分类为【财务月模板流程】的流程，请先配置流程'
                );
            })
            .catch(response => {
                message.error(response.msg);
            });
    };

    const handleOrganizationChange = useCallback(
        value => {
            if (selectOrganizationCode !== value) {
                mergeTabStore({
                    selectOrganizationCode: value,
                    countryNameCode: null
                });
            }
        },
        [mergeTabStore, selectOrganizationCode]
    );

    useEffect(() => {
        if (location.state?.organizationCode) {
            handleOrganizationChange(location.state?.organizationCode);
        }
    }, [location.state]);

    useEffect(() => {
        if (!initializedRef.current) {
            const orgCode =
                selectOrganizationCode || location.query?.organizationCode || defaultOrganization?.organizationCode;

            if (orgCode !== selectOrganizationCode) {
                initializedRef.current = true;
                mergeTabStore({
                    selectOrganizationCode: orgCode,
                    countryNameCode: null
                });
            }

            const { year, month } = location.query;
            if (year) {
                setCurrentSelectYear(year);
            }

            if (month) {
                setCurrentSelectMonth(month);
            }
        }
    }, [location, selectOrganizationCode, defaultOrganization, mergeTabStore]);

    useHandleRefreshMessage(refresh);

    return (
        <PageHeaderWrapper type="success">
            <TabContextMenuFilter enableDefaultSelect={false}>
                <TabMenuRouter
                    authCodeMap={MENU_AUTH_CODE_MAP}
                    type="templateSetting"
                    extraButton={
                        <div style={{ display: 'flex' }}>
                            <div className={salaryStyle.mr12} style={{ display: 'flex' }}>
                                <OrganizationSelect
                                    isStrictly
                                    isNeedPermission
                                    style={{ width: 220 }}
                                    onChange={handleOrganizationChange}
                                    value={selectOrganizationCode}
                                    allowClear={false}
                                    dropdownMatchSelectWidth
                                />
                            </div>
                            <div>
                                <Button onClick={() => goToSalaryTemplateLog(selectOrganizationCode)}>操作日志</Button>
                            </div>
                        </div>
                    }
                >
                    <div className={styles.container}>
                        <Spin spinning={pageLoading}>
                            <div className={styles.salaryContent}>
                                <div className={styles.titleWrap}>
                                    <div className={styles.leftTitleWrap}>
                                        <div className={styles.title}>
                                            {formatMessage({ id: 'templateSetting.salaryTemplate.salaryMainTitle' })}
                                        </div>
                                        <YearSelect
                                            value={currentSelectYear}
                                            onChange={onSetCurrentYear}
                                            organizationCode={selectOrganizationCode}
                                        />
                                        <Select
                                            value={currentSelectMonth}
                                            size="small"
                                            style={{ width: 90 }}
                                            onSelect={key => {
                                                setCurrentSelectMonth(key);
                                                getCurrentSalaryMainData(key);
                                            }}
                                        >
                                            {monthList.map(item => (
                                                <Option value={item.key} key={item.label}>
                                                    {item.label}
                                                </Option>
                                            ))}
                                        </Select>
                                    </div>
                                    <div>
                                        <AutoDivider>
                                            <a
                                                onClick={e => {
                                                    e.preventDefault();
                                                    setSalarySheetModalVisible(true);
                                                }}
                                            >
                                                {/* 薪资条预览 */}
                                                {formatMessage({ id: 'templateSetting.salaryTemplate.preSalaryBtn' })}
                                            </a>
                                            <If
                                                condition={
                                                    authHelper.checkCode('finance:salary:computation:setting:salarytemp:setting') &&
                                                        isSingapore(selectOrganizationCode)
                                                }
                                            >
                                                <a
                                                    onClick={e => {
                                                        e.preventDefault();
                                                        setPayslipSettingModalVisible(true);
                                                    }}
                                                >
                                                    {/* 打印设置 */}
                                                    {formatMessage({
                                                        id: 'templateSetting.salaryTemplate.printSetBtn'
                                                    })}
                                                </a>
                                            </If>
                                        </AutoDivider>
                                    </div>
                                </div>
                                <div className={styles.tableWrap}>
                                    <div className={styles.salaryMainTable}>
                                        <Table
                                            columns={[...headerStaffItems, ...headerSalaryItems]}
                                            dataSource={tableData}
                                            bordered
                                            pagination={false}
                                            loading={tableLoading}
                                            scroll={{ x: true }}
                                            rowKey="employeeNo"
                                        />
                                    </div>
                                    {needConfig && (
                                        <div className={styles.salaryOperationWrap}>
                                            <Anchor affix={false} className={styles.salaryAnchor}>
                                                <a title="立即配置" href={`#monthSalaryMain-${currentSelectMonth}`}>
                                                    <img
                                                        className={styles.salaryOperationBg}
                                                        src={salaryOperationImg}
                                                        alt=""
                                                    />
                                                    <div>立即配置</div>
                                                </a>
                                            </Anchor>
                                        </div>
                                    )}
                                </div>
                            </div>
                            <Spin spinning={baseInfoLoading}>
                                <BaseInfoSetting
                                    baseInfoList={baseInfoList}
                                    onDeleteBaseInfoItem={onDeleteBaseInfoItem}
                                    onSaveBaseInfoItem={() => {
                                        getBaseInfoList();
                                        getCurrentSalaryMainData(currentSelectMonth);
                                    }}
                                    getBaseInfoList={getBaseInfoList}
                                    currentSelectYear={currentSelectYear}
                                    currentOrgCode={selectOrganizationCode}
                                    isGuide={isGuide}
                                />
                            </Spin>
                            <MonthSalaryMain
                                monthSalaryList={monthSalaryList}
                                getSalaryMonthList={getSalaryMonthList}
                                currentSelectYear={currentSelectYear}
                                currentSelectMonth={currentSelectMonth}
                                currentOrgCode={selectOrganizationCode}
                                afterChangeGenerateDate={afterChangeGenerateDate}
                                simplePageVo={simplePageVo}
                                afterEdit={refresh}
                            />
                            <SalarySheetModal
                                visible={salarySheetModalVisible}
                                currentSelectMonth={currentSelectMonth}
                                currentSelectYear={currentSelectYear}
                                onCancel={onCloseSalarySheetModal}
                                currentOrgCode={selectOrganizationCode}
                            />
                            <BottomAction>
                                <AuthComponent code="finance:salary:computation:setting:salarytemp:reset">
                                    <Button onClick={reset} disabled={simplePageVo.disable || !simplePageVo.resetAble}>
                                        重置
                                    </Button>
                                </AuthComponent>

                                <AuthComponent code="finance:salary:computation:setting:salarytemp:next">
                                    <Button
                                        type="primary"
                                        onClick={goToNext}
                                        disabled={simplePageVo.disable || !simplePageVo.nextAble}
                                    >
                                        下一步
                                    </Button>
                                </AuthComponent>
                            </BottomAction>
                            <Modal
                                visible={resetVisible}
                                title="重置"
                                okText="确定"
                                cancelText="取消"
                                onOk={doReset}
                                onCancel={() => setResetVisible(false)}
                                width={480}
                                centered
                            >
                                <div style={{ margin: '30px 20px' }}>
                                    重置后所有数据将回退到上次审批通过的结果，是否确定重置？
                                </div>
                            </Modal>

                            <If condition={payslipSettingModalVisible}>
                                <PayslipSetting
                                    organizationCode={selectOrganizationCode}
                                    year={currentSelectYear}
                                    month={currentSelectMonth}
                                    visible={payslipSettingModalVisible}
                                    onCancel={() => setPayslipSettingModalVisible(false)}
                                    onOk={() => setPayslipSettingModalVisible(false)}
                                />
                            </If>
                        </Spin>
                    </div>
                </TabMenuRouter>
            </TabContextMenuFilter>
        </PageHeaderWrapper>
    );
};
SalaryTemplate.displayName = 'SalaryTemplate';

export default withRoutePage(SalaryTemplate);
